<template>
	<div class="block">
		<tui-time-axis>
			<tui-timeaxis-item backgroundColor="transparent" v-for="(item, index) in tasks" :key="index">
				<template v-slot:node>
					<view class="tui-node-dot"></view>
				</template>

				<template v-slot:content>
					<view class="tui-order-desc">任务：{{ item.name }}</view>
					<uni-card is-full>
						<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
							审批人：{{ item.assigneeUser.nickname }}
							<uni-tag type="info" size="mini" :text="item.assigneeUser.deptName"></uni-tag>
						</label>
						<view>
							<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
							<label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
						</view>
						<view v-if="item.endTime">
							<label style="font-weight: normal">审批时间：</label>
							<label style="color:#8a909c;font-weight: normal">{{ parseTime(item.endTime) }}</label>
						</view>
						<view v-if="item.durationInMillis">
							<label style="font-weight: normal">耗时：</label>
							<label style="color:#8a909c;font-weight: normal">{{ getDateStar(item.durationInMillis) }}</label>
						</view>
						<p v-if="item.reason"><uni-tag :type="getTimelineItemType(item) == 'danger' ? 'error' : getTimelineItemType(item)" :text="item.reason"></uni-tag></p>
					</uni-card>
				</template>
			</tui-timeaxis-item>
		</tui-time-axis>
		<!-- <el-timeline>
      <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
        :type="getTimelineItemType(item)">
        <p style="font-weight: 700">任务：{{ item.name }}</p>
        <el-card :body-style="{ padding: '10px' }">
          <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
            审批人：{{ item.assigneeUser.nickname }}
            <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
          </label>
          <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
          <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
          <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
          <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{ parseTime(item.endTime)
            }}</label>
          <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
          <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal"> {{
            getDateStar(item.durationInMillis) }} </label>
          <p v-if="item.reason">
            <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline> -->
	</div>
</template>
<script>
// import { DICT_TYPE, getDictDatas } from "@/utils/dict"
import { getDate } from '@/utils/dateUtils';
import tuiTimeAxis from '@/components/tui-time-axis/tui-time-axis.vue';
import tuiTimeaxisItem from '@/components/tui-timeaxis-item/tui-timeaxis-item.vue';
import { parseTime } from '@/utils/ruoyi.js';
//任务详情
export default {
	name: 'taskDetail',
	props: {
		tasks: {
			type: Array,
			default: () => []
		}
	},
	components: { tuiTimeAxis, tuiTimeaxisItem },
	data() {
		return {};
	},
	created() {},
	methods: {
		parseTime,
		getDateStar(ms) {
			return getDate(ms);
		},
		getTimelineItemIcon(item) {
			if (item.result === 1) {
				return 'el-icon-time';
			}
			if (item.result === 2) {
				return 'el-icon-check';
			}
			if (item.result === 3) {
				return 'el-icon-close';
			}
			if (item.result === 4) {
				return 'el-icon-remove-outline';
			}
			return '';
		},
		getTimelineItemType(item) {
			if (item.result === 1) {
				return 'primary';
			}
			if (item.result === 2) {
				return 'success';
			}
			if (item.result === 3) {
				return 'danger';
			}
			if (item.result === 4) {
				return 'info';
			}
			return '';
		}
	},
	options: {
		styleIsolation: 'shared'
	}
};
</script>

<style lang="scss">
.my-process-designer {
	height: calc(100vh - 200px);
}

.box-card {
	width: 100%;
	margin-bottom: 20px;
}

.app-container .el-input.is-disabled .el-input__inner {
	background-color: transparent;
	border-color: transparent;
	color: #000;
	cursor: default;
}

.content p {
	margin: 0;
	padding: 0;
}
.tui-node-dot {
	height: 16rpx;
	width: 16rpx;
	background-color: #ddd;
	border-radius: 50%;
	/* transform: translateY(45%); */
	margin-top: 6rpx;
}

.tui-bg-primary {
	background: #eb0909 !important;
}

.tui-order-tracking {
	padding: 30rpx 30rpx 30rpx 40rpx;
	background: #fff;
	margin-top: 20rpx;
	box-sizing: border-box;
}

.tui-order-title {
	padding-bottom: 12rpx;
	font-size: 3.2rem;
	color: #333;
	font-weight: bold;
}

.tui-order-desc {
	padding-bottom: 12rpx;
	font-size: 2.8rem;
	color: #333;
}

.tui-ptop {
	display: flex;
	justify-content: flex-start;
	line-height: 2.8rem;
}

.tui-order-time {
	font-size: 2.4rem;
	font-weight: bold;
}

.tui-gray {
	color: #848484 !important;
}

.tui-light-gray {
	color: #888 !important;
}

.tui-primary {
	color: #5677fc;
}
/deep/ .block {
	.uni-card .uni-card__content {
		font-size: 2.8rem;
		line-height: 4.4rem;
	}
	.uni-tag{
		font-size: 2.4rem;
		line-height: 2.8rem;
	}
}
</style>
